import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import {withRouter} from 'react-router-dom'
import '../../assets/font/iconfont.css'
import './tabbar.css'
class Tabbar extends Component {
    constructor(props) {
        super(props);
        // console.log(props);
        this.state = {
            selectedTab: "redTab",
            hidden: false,
            fullScreen: true,
        };
    }
    render() {
        return (
            <div style={
                this.state.fullScreen
                    ? { position: "fixed", height: "100%", width: "100%", top: 0 }
                    : { height: 400 }
            }>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#ea4350"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<div style={{
                            fontSize: '0.586667rem'
                        }}
                            className="iconfont icon-shouye"
                        />
                        }
                        selectedIcon={<div style={{
                            fontSize: '0.586667rem',
                            color: '#ea4350'
                        }}
                            className="iconfont icon-shouye"
                        />
                        }
                        selected={this.props.location.pathname === "/"}
                        onPress={() => {
                            this.props.history.push("/")
                        }}
                    >
                        {this.props.location.pathname === "/"&&this.props.children}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                fontSize: '0.586667rem'
                            }}
                                className="iconfont icon-fenlei"
                            />
                        }
                        selectedIcon={
                            <div style={{
                                fontSize: '0.586667rem',
                                color: '#ea4350'
                            }}
                                className="iconfont icon-fenlei"
                            />
                        }
                        title="分类"
                        key="category"
                        selected={this.props.location.pathname === "/category"}
                        onPress={() => {
                            this.props.history.push("/category")
                        }}
                    >
                        {this.props.location.pathname === "/category"&&this.props.children}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                fontSize: '0.586667rem'
                            }}
                                className="iconfont icon-gouwuche"
                            />
                        }
                        selectedIcon={
                            <div style={{
                                fontSize: '0.586667rem',
                                color: '#ea4350'
                            }}
                                className="iconfont icon-gouwuche"
                            />
                        }
                        title="购物车"
                        key="cart"
                        selected={this.props.location.pathname === "/cart"}
                        onPress={() => {
                            this.props.history.push("/cart")
                        }}
                    >
                        {this.props.location.pathname === "/cart"&&this.props.children}
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<div style={{
                            fontSize: '0.586667rem'
                        }}
                            className="iconfont icon-wode"
                        ></div>}
                        selectedIcon={
                            <div style={{
                                fontSize: '0.586667rem',
                                color: '#ea4350'
                            }}
                                className="iconfont icon-wode"
                            />}
                        title="我的"
                        key="my"
                        selected={this.props.location.pathname === "/my"}
                        onPress={() => {
                            this.props.history.push("/my")
                        }}
                    >
                        {this.props.location.pathname === "/my"&&this.props.children}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default withRouter(Tabbar);
